<template>
  <div class="w-full">
    <!-- <code> -->
    <!-- {{ 单项组 }} -->
    <!-- <pre class="w-[400px]"> {{ 单项组 }}</pre> -->
    <!-- </code> -->
    <div class="flex space-x-4">
      <div class="text-h6 text-primary">{{ 标题 }}</div>
      <el-button type="primary" icon="plus" @click="子表.加一行()" plain size="small">加一行</el-button>
    </div>

    <el-table style="width: 100%" tooltip-effect="dark" :data="单项组" row-key="id" border>
      <!-- <el-table-column type="selection" width="55" /> -->
      <el-table-column align="left" :label="item" width="120" v-for="item in 父组件.单项.可选配置">
        <template #default="{ row }">
          <!-- row=[{"label": "大小", "value": 6}, {"label": "颜色", "value": "白"}] -->
          <template v-for="item2 in row['可选配置值']">
            <el-input v-model="item2.value" v-if="item2.label == item" />
          </template>
        </template>
      </el-table-column>

      <el-table-column align="left" label="价格" prop="价格" width="120">
        <template #default="{ row }">
          <el-input :disabled="row.disabled" v-model.number="row.价格" />
        </template>
      </el-table-column>
      <el-table-column align="left" label="库存" prop="库存" width="120">
        <template #default="{ row }">
          <el-input :disabled="row.disabled" v-model.number="row.库存" />
        </template>
      </el-table-column>
      <el-table-column label="图片" prop="图片">
        <template #default="scope">
          <!-- <div class="multiple-img-box">
            <el-image preview-teleported v-for="(item, index) in scope.row.图片" :key="index"
              style="width: 80px; height: 80px" :src="getUrl(item)" fit="cover" />
          </div> -->
          <div>
            <SelectImage v-model="scope.row.图片" file-type="image" />
          </div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="操作" fixed="right">
        <template #default="scope">
          <el-button type="danger" link icon="delete" @click="子表.删行(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>

<script setup>
import { ref, reactive, computed } from 'vue'
// import * as util from 'amtf/util/utils';
import *  as util from '@/utils'

import SelectImage from '@/components/selectImage/selectImage.vue';
// const 单项组 = reactive([])
// const 拟删除子表ids = {}
// const 单项组 = reactive([])

// const 展示arr = computed(() => {
//   let res = util.数组过滤一排除(单项组, '标记', '删除')
//   return res
// })
const props = defineProps({
  // 可选配置: { type: Array, default: [] }
  父组件: Object,
  标题: {
    type: String,
    default: '标题'
  }
})

import use子表 from '@/hooks/use子表';
const 子表 = use子表({ 父组件: props.父组件 })
const {单项组} = 子表
props.父组件.子表=子表

// function 初始化(params) {
//   util.数组重新赋值(单项组, params)
// }

// function 加一行() {
//   console.log(`props 👉`, props)
//   let 可选配置值 = props.可选配置.map((params) => {
//     return { label: params }
//   })
//   单项组.unshift({
//     可选配置值,
//     库存: 99,
//     价格: 99,
//     图片: '',
//   })
// }

// const 删行 = (row) => {
//   // const index = 单项组.indexOf(row);
//   // if (index !== -1) 单项组.splice(index, 1);
//   let id = row.id
//   util.删除元素(单项组, row)
//   if (id) {
//     拟删除子表ids[id] = ''
//   }
// }

// const 保存 = async () => {
//   console.log(`单项组 👉`, 单项组)
// }

// defineExpose({ 单项组, 初始化, 拟删除子表ids })

</script>

<style scoped>
:deep(.el-table .el-table__cell) {
  z-index: auto;
}
</style>
